import React, { Component } from 'react'
import axios from '../../ulis/request'
import debounce from '../../ulis/debounce'

export default class One extends Component {
    componentDidMount(){
        this.hotList()   
    }

    //渲染数据
    hotList=()=>{
        axios({
            url:'/pc/learnhotList'
        }).then(res => {
            if (res.data.code === 1) {
                this.setState({
                    list: res.data.data,
                })
              } else {
                this.props.history.push('/login')
              }
        })
    }

    //删除数据
    del(id){
        axios({
            url:'/pc/delhot',
            method:'post',
            data:{
                id:id
            }
        }).then(res => {
            this.hotList()
        })
    }


    //增加
    add(){
        this.setState({
            flag: true,
            addlist:{}
        })
    }
    metter = (value,key) =>{
        console.log(value,key);
        
        let { addlist } = this.state
        addlist[key] = value
        this.setState({
            addlist
        })
    }
    //点击增加
    AddList=(addlist)=> {
        this.setState({
            flag: false,
        })

        axios({
            url:'/pc/addhot',
            method:'post',
            data:{
                title:addlist.title,
                num:addlist.num,
                time:addlist.time,
                type:addlist.type,
            }
        }).then(res => {
               this.hotList()
        })
    }
    

    //编辑
    com(item){
        this.setState({
            upflag: true,
            comlist:{ ...item }
        })
    }
    //获取输入内容
    metter1 = (value,key) =>{
        let { comlist } = this.state
        comlist[key] = value
        this.setState({
            comlist
        })
    }
    //点击修改
    ComList = (comlist) => {
        this.setState({
            upflag: false,
        })

        axios({
            url:'/pc/updatehot',
            method:'post',
            data:{
                title:comlist.title,
                num:comlist.num,
                time:comlist.time,
                type:comlist.type,
                id:comlist.id
            }
        }).then(res => {
               this.hotList()
        })
    }

    //查找数据
    search=(value)=>{
        debounce(() => {
            axios({
                url:'/pc/checkhot',
                method:'post',
                data:{
                    value:value
                }
            }).then(res => {
                this.setState({
                    list: res.data.data,
                })
            })
        },1000)
        
    }

    
    //关闭蒙层
    cencel(){
        this.setState({
            upflag: false,
            flag:false
        })
    }

    state = {
        list:[],
        flag:false,
        upflag:false,
        addlist:{},
        comlist:{}
    }

    render() {
        const { list,flag,upflag, addlist,comlist } = this.state
        return (
            <div className="hot">
                <div className="hot_top">
                    <input type="text" placeholder="请输入关键字" onChange={(e) => this.search(e.target.value)} /><button className="search">搜索</button><button className="add" onClick={() => this.add()}>新增</button>
                </div>
                <div className="hot_main">
                    <table border="1">
                        <thead>
                            <tr>
                                <th width="100px">ID</th>
                                <th width="460px">标题</th>
                                <th width="180px">时间</th>
                                <th width="140px">类型</th>
                                <th width="140px">阅读</th>
                                <th width="200px">操作</th>
                            </tr>
                        </thead>
                        {
                            list.length && list.map((item, idx) => {
                                return <tbody key={idx}>
                                    <td>{idx+1}</td>
                                    <td>{item.title}</td>
                                    <td>{item.time}</td>
                                    <td>{item.type}</td>
                                    <td>{item.num}</td>
                                    <td>
                                        <span id="com" onClick={() => this.com(item)}>编辑</span>
                                        <span id="del" onClick={() => this.del(item.id)}>删除</span>
                                    </td>
                                </tbody>
                            })
                        }
                    </table>

                </div>
                {
                    flag ? <div className="mask">
                        <div className="content">
                            <h1 onClick={() => this.cencel()}>X</h1>
                            <span>标题  :  </span>
                            <input type="text" value={addlist.title} onChange={(e) => this.metter(e.target.value, 'title')} /><br />
                            <span>时间 :  </span>
                            <input type="text" value={addlist.time} onChange={(e) => this.metter(e.target.value, 'time')} /><br />
                            <span>类型  :  </span>
                            <input type="text" value={addlist.type} onChange={(e) => this.metter(e.target.value, 'type')} /><br />
                            <span>阅读 :  </span>
                            <input type="text" value={addlist.num} onChange={(e) => this.metter(e.target.value, 'num')} /><br />
                            <button onClick={() => this.AddList(addlist)}>确定添加</button>
                        </div>
                    </div> : <></>
                }
                {
                    upflag ? <div className="mask">
                        <div className="content">
                            <h1 onClick={() => this.cencel()}>X</h1>
                            <span>标题  :  </span>
                            <input type="text" value={comlist.title} onChange={(e) => this.metter1(e.target.value, 'title')} /><br />
                            <span>时间 :  </span>
                            <input type="text" value={comlist.time} onChange={(e) => this.metter1(e.target.value, 'time')} /><br />
                            <span>类型  :  </span>
                            <input type="text" value={comlist.type} onChange={(e) => this.metter1(e.target.value, 'type')} /><br />
                            <span>阅读 :  </span>
                            <input type="text" value={comlist.num} onChange={(e) => this.metter1(e.target.value, 'num')} /><br />
                            <button onClick={() => this.ComList(comlist)}>确定修改</button>
                        </div>
                    </div> : <></>
                }
            </div>
        )
    }
}
